import 'core-js/fn/array/from'

import Scrollload from '../../Scrollload'
import './index.css'
import '../../loading-demos/baidu-mobile/loading.css'

const data = [
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20141222121421_798.jpg',
        name: '画圆圈',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    },
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20150611143728_164.png',
        name: '英雄难过棍子关',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    },
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20150403115426_276.jpg',
        name: '胸口碎大石',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    },
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20150611160815_643.jpg',
        name: '酒后别开车',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    },
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20150715225730_758.jpg',
        name: '是男人就去优衣库',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    }
]

function getData() {
    return Array.from(new Array(5)).map(() => {
        let item = data[Math.floor(Math.random() * 5)]
        return `
        <li>
            <div class="info">
                <img class="image" src="${item.image}">
                <div class="desc">
                    <p>${item.name}</p>
                    <span>${item.label}</span>
                    <p>${item.desc}</p>
                </div>
            </div>
            <a class="btn" href="http://m.dolapocket.com/" target="_blank">开始</a>
        </li>
`
    }).join('')
}
let count = 0
const scrollload = new Scrollload(document.querySelector('.container'), function(sl){
    setTimeout(() => {
        if (count === 2) {
            count++
            sl.throwException()
            return
        }

        if (count++ < 5) {
            document.querySelector('.list').insertAdjacentHTML('beforeend', getData())
            sl.unLock()
        } else {
            sl.noData()
        }
    }, 500)
},{
    loadingHtml: `
            <div class="s-loading-frame">
                <div class="load-img-wrapper">
                    <img class="load-ing-img" src="">
                </div>
                <span class="load-text">正在加载</span></div>
            </div>
`,
    noDataHtml: `
            <div class="s-loading-frame bottom-no-more">
                <span>真的拉不出新东西了~</span>
            </div>
`,
    exceptionHtml: `
    <div style="text-align: center;line-height: 50px;font-size: 14px;">出现异常，点击恢复异常：<a class="clickHandler" style="color: red;font-size: 16px">点我</a></div>
`,
})

scrollload.container.addEventListener('click', function (event) {
    if (event.target.classList.contains('clickHandler')) {
        scrollload.solveException()
    }
})

